<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
				<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</template>
			<template #c>
				<view class="fixtop-c">
					营业统计
				</view>
			</template>
		</fixtopVue>
	</view>
	<view class="conbox">
		<view class="nav">
			<view class="item" v-for="(i,index) in bavdata" :key="i" :class="{selected:current==index}" @click="changenav(index)"> {{i}}</view>
		</view>
		<view class="timeshow">
			<view class="">2025-11-22至2025-11-22</view>
			<view class="iconfont icon-rili" ></view>
		</view>
		<view class="conboxcount">
			<view class="">
				<view class="t">营业总额</view>
				<view class="b">￥2313123</view>
			</view>
			<view class="">
				<view class="t">客单价</view>
				<view class="b">￥2323</view>
			</view>
			<view class="">
				<view class="t">成交订单</view>
				<view class="b">3123</view>
			</view>
			<view class="">
				<view class="t">退款订单</view>
				<view class="b">13</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	const product = getstatusheight() + gettitleheight() + 'px'
	const bavdata = ["7日内", "30日内", "自定义"]
	const current = ref(0)
	const back = () => {
		uni.navigateBack()
	}
	const changenav=e=>{
		current.value=e
	}
</script>

<style lang="scss" scoped>
	.conboxcount {
		height: 450rpx;
		width: 94%;
		margin: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		background-color: #fff;
		border-radius: 15rpx;
		justify-items: center;
		align-items: center;
		// grid-template-rows: repeat(2,1fr);
		>view{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			.t{
				font-size: 28rpx;
			}
			.b{
				color: red;
				font-size: 37rpx;
				font-weight: 700;
			}
		}
	}

	.timeshow {
		height: 100rpx;
		width: 100%;
		font-size: 25rpx;
		color: #7b7b7b;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.conbox {
		width: 100%;
		height: calc(100vh - v-bind(product));
		background-color: #f5f5f5;
	}

	.fixtop {
		background-color: #ff644d;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
		}

		.fixtop-l {
			padding-left: 20rpx;

			.iconfont {
				transform: rotate(180deg);
				font-size: 25rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
		}
	}

	.nav {
		height: 110rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.item {
			position: relative;
			height: 50rpx;
			width: fit-content;
			font-size: 28rpx;
		}

		.selected {
			color: #ff644d;

			&:before {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				height: 4rpx;
				width: 40%;
				background-color: #ff644d;
				border-radius: 4rpx;
			}
		}
	}
</style>